import styled from "@emotion/styled"

import { ImageComponent } from "@/components/base/Image"
import { resolveAssetImage } from "@/utils/common"

import { PageHeader } from "@/pages/AccountPage/components/PageHeader"
import { NavLink } from "react-router-dom"
import { Repository } from "@/atoms/api_repositories"
import { useAuth } from "@/features/useAuth"
// import { verifyAtom } from "@/pages/AccountPage/atoms/verify"
// import { useSetAtom } from "jotai"
import { useAtom } from "jotai"
import { SetVerifyAtom, verifyAtom } from "@/pages/AccountPage/atoms/verify"
import { useNavigate } from "react-router-dom"
import Image from "../base/Image"
import AssetKey from "custom/asset_key"

interface Column {
    title: string
    icon: AssetKey
    arrow: React.ReactNode
    onClick?: () => void
}

interface BaseVeifyTypeProps {
    columns: Column[]
    backPath?: string
    title?: string
    description?: string
    onBack?: () => void
}

export default function BaseVeifyType({
    columns,
    backPath,
    onBack,
    title = "Security Verification",
    description = "To protect your account security, we need to verify your identity. Please choose a way to verify",
}: BaseVeifyTypeProps) {
    // const navigate = useNavigate()
    // const { data: userInfo } = Repository.useUserInfo()
    // const { sendVerifyCode } = useAuth()
    // const setVerifyData = useSetAtom(verifyAtom)
    // const sendSms = async () => {
    //     const phone = userInfo?.phoneNumber?.number
    //     if (phone) {
    //         const res = await sendVerifyCode(phone)
    //         console.log(res, "res")
    //         if (res && res.success && res.data?.id) {
    //             setVerifyData((prev) => ({
    //                 ...prev,
    //                 otpId: res?.data?.id,
    //             }))
    //             // 获取otpid 后跳转到otp页面
    //             navigate("/s-account/form/verify?action=phone")
    //         }
    //     }
    // }
    // const columns: Column[] = [
    //     {
    //         title: "Email Verification",
    //         icon: EmailIcon,
    //         arrow: ArrowRightIcon,
    //     },
    //     {
    //         title: "Phone Verification",
    //         icon: PhoneIcon,
    //         arrow: ArrowRightIcon,
    //         onClick: sendSms,
    //     },
    //     {
    //         title: "Customer Service",
    //         icon: ServerIcon,
    //         arrow: ArrowRightIcon,
    //         // path: "/service",
    //     },
    // ]
    const renderIcon = (icon: AssetKey) => {
        return <Image src={icon} />
    }
    return (
        <Root>
            <VerifyBg />
            <PageHeader
                iconType="square-close"
                backPath={backPath}
                onBack={onBack}
                backgroundColor="transparent"
            ></PageHeader>
            <PgaeBody>
                <VerifyImage />
                <TipBox>
                    <Title>{title}</Title>
                    <Description>{description}</Description>
                </TipBox>
                <List>
                    {columns?.map((item: Column, index: number) => {
                        return (
                            <ListItem
                                key={index}
                                onClick={item.onClick}
                            >
                                <LeftBox>
                                    <Icon>{renderIcon(item.icon)}</Icon>
                                    <ItemText>{item.title}</ItemText>
                                </LeftBox>
                                <ArrowIcon>{item.arrow}</ArrowIcon>
                            </ListItem>
                        )
                    })}
                </List>
            </PgaeBody>
        </Root>
    )
}

const Root = styled.div`
    width: 100%;
    height: 100vh;
    flex: 1;
    position: relative;
`

const VerifyBg = styled(ImageComponent("pages/AccountPage/verify_bg.webp"))`
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    left: 0;
    width: 100%;
    > img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
`

const PgaeBody = styled.div`
    width: 100%;
    padding: 16rem 24rem 0 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
`
const VerifyImage = styled(ImageComponent("pages/AccountPage/verify.webp"))`
    width: 120rem;
    height: 120rem;
`
const TipBox = styled.div`
    width: 100%;
    margin-top: 24rem;
`
const Title = styled.div`
    font-family: Gilroy;
    font-weight: 700;
    font-size: 20rem;
    line-height: 32rem;
    letter-spacing: 0%;
    text-align: center;
`
const Description = styled.div`
    font-family: Gilroy;
    font-weight: 500;
    font-size: 14rem;
    line-height: 20rem;
    letter-spacing: 0%;
    text-align: center;
`
const List = styled.div`
    width: 100%;
    height: 168rem;
    margin-top: 40rem;
`
const ListItem = styled.div`
    height: 48rem;
    background: #ffffff;
    display: flex;
    padding-left: 16rem;
    padding-right: 12rem;
    justify-content: space-between;
    align-items: center;
    border-radius: 10rem;
    margin-bottom: 12rem;
    text-decoration: none;
    color: #272e3b;
`
const LeftBox = styled.div`
    display: flex;
`
const Icon = styled.div`
    width: 24rem;
    height: 24rem;
    margin-right: 16rem;
    > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
`
const ItemText = styled.div`
    font-family: Gilroy;
    font-weight: 500;
    font-size: 16rem;
    line-height: 24rem;
    letter-spacing: 0%;
`
const ArrowIcon = styled.div`
    width: 24rem;
    height: 24rem;
    > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
`
